<template>
  <!-- 设置 -->
  <div class="drawer-box">
    <el-radio-group v-model="circleTab" @change="tabChange">
      <el-radio-button label="1">我的圈子成员</el-radio-button>
      <el-radio-button label="2">我加入的圈子</el-radio-button>
      <el-radio-button label="3">我的好友</el-radio-button>
    </el-radio-group>
    <div class="" v-if="circleTab == 1">
      <div class="chatSet">
        <!-- 群成员列表 -->
        <div class="group-list">
          <ul>
            <el-radio-group v-model="arr" @change="handleCheckedCitiesChange">
              <li v-for="(canGroupItem, canGroupIndex) in getCanMember || []" :key="canGroupIndex">
                <!-- 盒子 -->
                <!-- 盒子 -->
                <el-radio :label="canGroupItem">
                  <!-- 头像 -->
                  <el-avatar class="avatar" :src="canGroupItem.avatar == '' ? DeAvatar : canGroupItem.avatar" :size="32">
                  </el-avatar>
                  <p>
                    <!-- 名字 -->
                    <span>{{ canGroupItem.nickname }}</span>
                  </p>
                </el-radio>
              </li>
            </el-radio-group>
          </ul>
        </div>
      </div>
    </div>
    <div class="" v-if="circleTab == 2">
      <div class="chatSet">
        <!-- 群成员列表 -->
        <div class="group-list" v-if="!userListShow">
          <ul>
            <li v-for="(item, index) in circleList || []" :key="index" @click="getUserList(item)">
              <!-- 头像 -->
              <el-avatar class="avatar" :src="item.avatar == '' ? DeAvatar : item.avatar" :size="32">
              </el-avatar>
              <p>
                <!-- 名字 -->
                <span>{{ item.masterName }}</span>
              </p>
            </li>
          </ul>
        </div>
        <div class="group-list" v-else>
          <div>
            <!-- 面包屑 -->
            <p class="el-breadcrumb">
              <span @click="crumbBlack()">我加入的圈子</span> >> <span class="color">{{ aviCircle.masterName }}</span>
            </p>
          </div>
          <ul>
            <el-radio-group v-model="arr" @change="handleCheckedCitiesChange">
              <li v-for="(canGroupItem, canGroupIndex) in userList || []" :key="canGroupIndex">
                <!-- 盒子 -->
                <!-- 盒子 -->
                <el-radio :label="canGroupItem">
                  <!-- 头像 -->
                  <el-avatar class="avatar" :src="canGroupItem.avatar == '' ? DeAvatar : canGroupItem.avatar" :size="32">
                  </el-avatar>
                  <p>
                    <!-- 名字 -->
                    <span>{{ canGroupItem.nickname }}</span>
                  </p>
                </el-radio>
              </li>
            </el-radio-group>
          </ul>
        </div>
      </div>
    </div>
    <div class="" v-if="circleTab == 3">
      <div class="chatSet">
        <!-- 群成员列表 -->
        <div class="group-list">
          <ul>
            <el-radio-group v-model="arr" @change="handleCheckedCitiesChange">
              <li v-for="(item, index) in myFriends || []" :key="index">
                <!-- 盒子 -->
                <!-- 盒子 -->
                <el-radio :label="item">
                  <!-- 头像 -->
                  <el-avatar class="avatar" :src="item.avatar == '' ? DeAvatar : item.avatar" :size="32">
                  </el-avatar>
                  <p>
                    <!-- 名字 -->
                    <span>{{ item.name }}</span>
                  </p>
                </el-radio>
              </li>
            </el-radio-group>
          </ul>
        </div>
      </div>
    </div>
    <SubBtn>
      <template slot="btn">
        <!-- <el-button round>返回</el-button> -->
        <el-button round class="addBtn" @click="submit">发起聊天</el-button>
      </template>
    </SubBtn>
  </div>

</template>

<script>
  import {
    getSelectUserByCircleApi,
  } from "@/BMViews/api/budget/budgetService.js";
  import {
    getSelectCircleByUserIdApi,
    imCreateSessionApi,
    imSelectSessionApi,
  } from "@/BMViews/api/financial/deposit.js";

  import {
    getFriendListApi,
  } from "@/BMViews/api/service/circle.js";

  import {
    getName,
  } from "@/BMViews/api/upload/index.js";

  import {
    mapGetters
  } from "vuex";

  import SubBtn from "@/components/subBtn/subBtn.vue"
  export default {
    components: { SubBtn },
    data() {
      return {
        // 默认头像src\assets\images\defaultAvatar.jpg
        DeAvatar: require("@/assets/images/defaultAvatar.jpg"),
        circleTab:'1',  //tab
        arr: {}, //所选中的复选框
        checkedCities:[],
        getCanMember:[],
        aviCircle:'', //当前选择圈子
        //圈子列表
        circleList:[],
        userListShow: false,
        userList:[],  //用户列表
        myFriends:[], //好友列表
      };
    },
    created() {

    },

    mounted() {
      this.getFriend()
      //获取我的圈子
      this.getSelectCircleByUserId()
      //获取我的好友
      this.getMyFriends()
    },
    computed: {
      ...mapGetters(["userType","userInfo", "cmId", "circleId", "userId"]),
      getUsrType() {
        // 10自己注册 00系统注册 40跟单 50专家 60商务 65渠道 69商务和渠道 80实体 90专家助理
        return (type) => {
          if (type == "0") {
            return "用户";
          } else if (type == "1") {
            return "专家";
          } else if (type == "2") {
            return "商务专员";
          } else if (type == "3") {
            return "商务总监";
          } else if (type == "4") {
            return "商务经理";
          } else if (type == "5") {
            return "渠道专员";
          } else if (type == "6") {
            return "渠道总监";
          } else if (type == "7") {
            return "渠道经理";
          } else if (type == "8") {
            return "跟单";
          } else if (type == "9") {
            return "专家助理";
          } else if (type == "10") {
            return "圈子成员";
          } else {
            return "商务";
          }
        };
      },
    },
    methods: {
      //选项卡切换
      tabChange(){
        this.arr = {}
      },
      handleCheckedCitiesChange(value) {
        console.log(value);
      },
      //面包屑退后
      crumbBlack(){
        this.arr = {}
        this.userListShow = false;
      },
      //获取list里面的成员（members:{userid:;usertype:; original: ;}）
      async getFriend() {
        const {
          code,
          rows
        } = await getSelectUserByCircleApi({
          circleId: this.circleId
        });
        this.getCanMember = rows.filter(item=> item.userId != this.userId)

      },
      //获取我的圈子列表
      async getSelectCircleByUserId(){
        let myself = true
        let result = await getSelectCircleByUserIdApi({myself:false})
        if(result.code==200){
          // 过滤除了当前圈子
      	// 过滤当前圈子
      	this.circleList = result.rows.filter(item=>{
      	  if(item.circleId != this.circleId){
      	    return item
      	  }
      	})
        }
      },
      //获取圈员
      async getUserList(item){
        this.aviCircle = item;
        console.log(item);
        const {
          code,
          rows
        } = await getSelectUserByCircleApi({
          circleId: item.circleId
        });
        this.userList = rows.filter(item=> item.userId != this.userId)
        this.userListShow = true;
      },
      //获取好友
      async getMyFriends(){
        const { code, rows } = await getFriendListApi({
          status: 0,
          userId: this.userId,
        })
        this.myFriends = rows;
      },
      //创建会话
      async submit() {

      	console.log(111);
      	if (!this.arr) {
      		// console.log("000000000");
      		return false;
      	}
        let userId = this.arr.userId
        if(this.circleTab == 3){
          userId = this.arr.friendId
        }
        let resUserInfo = await this.getUserInfo([userId])
        console.log(resUserInfo);
        let res = await imSelectSessionApi({
        	toUserId: resUserInfo[0].userId,
        	toUserType: resUserInfo[0].userType,
        	userType: this.userInfo.userType,
        })
        if(res.code == 200){
          this.arr = {}
          this.$message({
            message: '创建成功',
            type: 'success'
          });
          this.$emit('change')
          this.$bus.$emit(
            "updataImList",res.data
          );
        }
      },
      //获取用户
      async getUserInfo(name) {
          const {
            data
          } = await getName({
            userIds: name?.join(',')
          });
          return data;
      },
      format(date,fmt = "yyyy-MM-dd hh:mm:ss") {
          var o = {
              "M+": date.getMonth() + 1, //月份
              "d+": date.getDate(), //日
              "h+": date.getHours(), //小时
              "m+": date.getMinutes(), //分
              "s+": date.getSeconds(), //秒
              "q+": Math.floor((date.getMonth() + 3) / 3), //季度
              "S": date.getMilliseconds() //毫秒
          };
          if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
              if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
      },
    },
    watch: {

    },
    filters: {
      // 超出20字显示省略号
      ellipsis(value) {
        if (!value?.title) return "";
        if (value?.title.length > 20) {
          return value.title.slice(0, 20) + "...";
        }
        return value;
      },
    },
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  ul li {
    list-style: none;
  }

  .chatSet {
    margin: 0 16px;
  }

  /* 群成员 */
  .member {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .member span:nth-child(1) {
    color: #516179;
    font-size: 14px;
  }

  .member span:nth-child(2) {
    color: #9c9c9c;
    font-size: 12px;
  }

  .Group-name {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #efefef;
  }

  .Group-name .avatar {
    font-size: 12px;
    margin-right: 10px;
    border-radius: 8px;
  }

  .Group-name p {
    display: inline-block;
    font-size: 14px;
    /* font-weight: 700; */
    padding-top: 10px;
  }

  /* 添加删除人员 */
  .add-del {
    margin-top: 15px;
  }

  .add-del p {
    margin-bottom: 10px;
  }

  .add-del p img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }

  .add-del p span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #232323;
    margin-left: 15px;
  }

  /* 群成员列表 */
  .group-list {
    height: calc(100% - 226px);
    margin-top: 10px;
    position: relative;
  }

  .group-list ul {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
  }

  .group-list ul li {
    display: flex;
    padding: 3px 0;
    margin-top: 4px;
  }

  ::v-deep .el-checkbox__input {
    line-height: 32px;
  }

  .group-list ul li p {
    padding: 2px;
    display: flex;
    align-items: center;
  }

  .group-list ul li p span {
    font-size: 14px;
    margin-left: 10px;
  }

  .group-list ul li p span:nth-child(2) {
    font-weight: 400;
    font-size: 12px;
    color: #878787;
    padding: 4px 6px;
    background: #efefef;
    border-radius: 2px;
  }

  .group-list ul:nth-child(2) p {
    padding: 0;
  }

  .group-list ul li .avatar {
    vertical-align: middle;
    /* margin-left: 16px; */
  }

  .group-list ul li .el-radio {
    display: flex;
    align-items: center;
    border-color: #f87a23;
    margin-right: 16px;
  }

  ::v-deep .group-list ul li .el-radio .el-radio__label {
    display: flex;
  }

  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    background-color: #f87a23;
    border-color: #f87a23;
  }

  ::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #f87a23;
  }

  /* 设置 */
  ::v-deep .el-breadcrumb {
    margin-top: 18px;
  }

  ::v-deep .el-breadcrumb span:nth-child(1):hover {
    cursor: pointer;
    color: #f87a23;
  }

  .add-btn,
  .del-btn {
    background-color: #f87a23;
    border-radius: 22px;
    width: 88%;
    height: 44px;
    box-sizing: border-box;
    border-color: #f87a23;
    border: none;
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 22px;
    left: 30px;
    z-index: 999;
  }

  .group-list {
    /* height: 92%; */
    overflow-y: auto;

  }

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 0px;
    /*高宽分别对应横竖滚动条的尺寸*/
  }
  /*弹窗*/
  .drawer-box{
    padding: 0 15px;
  }
  .drawer-box .el-radio-button{
    width:33.3333% !important;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
    color:#999
  }
  .el-breadcrumb .color{
    color: #f87a23;
  }
</style>
